<template>
  <div
    ref="dragWrapper"
    class="org-tree-drag-wrapper"
    @mousedown="mousedownView"
    @contextmenu="handleDocumentContextmenu"
  >
    <div class="org-tree-wrapper" :style="orgTreeStyle">
      <v-org-tree
        v-if="data"
        :data="data"
     
        :node-render="nodeRender"
        :expand-all="true"
        :horizontal="true"
        :label-class-name="labelClassName"
        @on-node-click="handleNodeClick"
        collapsable
      ></v-org-tree>
    </div>
  </div>
</template>

<script>
import { on, off } from "@/directive/module/tools";

const menuList = [
  {
    key: "edit",
    label: "编辑",
  },
  {
    key: "detail",
    label: "查看",
  },
  {
    key: "new",
    label: "新增",
  },
  {
    key: "delete",
    label: "删除",
  },
];

export default {
  name: "OrgView",
  props: {
    zoomHandled: {
      type: Number,
      default: 1,
    },
    data: Object,
  },
  data() {
    return {
      props: {
        id: "id",
        label: "name",
        children: "childs",
      },
      currentContextMenuId: "",
      orgTreeOffsetLeft: 0,
      orgTreeOffsetTop: 0,
      initPageX: 0,
      initPageY: 0,
      oldMarginLeft: 0,
      oldMarginTop: 0,
      canMove: false,
      menuVisible: false, // 默认菜单为隐藏状态
      labelClassName: "bg-none",
    };
  },
  computed: {
    orgTreeStyle() {
      return {
        transform: `translate(-50%, -50%) scale(${this.zoomHandled}, ${this.zoomHandled})`,
        marginLeft: `${this.orgTreeOffsetLeft}px`,
        marginTop: `${this.orgTreeOffsetTop}px`,
      };
    },
  },
  methods: {
    // 处理右击菜单方法

    handleNodeClick(e, data, expand) {
      // expand()
    },
    // 监听鼠标点击自定义菜单以外的事件 -> 即点击其他地方隐藏菜单
    closeMenu() {
      this.menuVisible = false; // 隐藏菜单
      this.currentContextMenuId = "";
    },
    // getBgColor(data) {
    //   return this.currentContextMenuId === data.id
    //     ? data.isRoot
    //       ? "#0d7fe8"
    //       : "#5d6c7b"
    //     : "";
    // },
    // 组织数据及下拉菜单 【注：事件方法写法  ex:@command变为on-command才会生效】
    nodeRender(h, data) {
      this.handleContextMenuClick.bind(this, data);
      return (
        <div
          on-mousedown={(event) => event.stopPropagation()}
          on-contextmenu={this.contextmenu.bind(this, data)}
          on-command={this.handleContextMenuClick.bind(this, data)}
        >
          <span
            on-click={this.handleContextMenuClick.bind(this, data)}
            class={[
              "custom-org-node",
              data.children && data.children.length ? "has-children-label" : "",
            ]}
          >
            {data.label}
          </span>
        </div>
      );
    },
    // 处理右击事件 -> 右击覆盖浏览器原生右击事件
    contextmenu(data, $event) {
      // this.menuVisible = true; // 显示隐藏菜单

      let event = $event || window.event;
      event.preventDefault
        ? event.preventDefault()
        : (event.returnValue = false);
      this.currentContextMenuId = data.id;
    },
    mousedownView(event) {
      this.canMove = true;
      this.initPageX = event.pageX;
      this.initPageY = event.pageY;
      this.oldMarginLeft = this.orgTreeOffsetLeft;
      this.oldMarginTop = this.orgTreeOffsetTop;
      on(document, "mousemove", this.mousemoveView);
      on(document, "mouseup", this.mouseupView);
    },
    mousemoveView(event) {
      if (!this.canMove) return;
      const { pageX, pageY } = event;
      this.orgTreeOffsetLeft = this.oldMarginLeft + pageX - this.initPageX;
      this.orgTreeOffsetTop = this.oldMarginTop + pageY - this.initPageY;
    },
    mouseupView() {
      this.canMove = false;
      off(document, "mousemove", this.mousemoveView);
      off(document, "mouseup", this.mouseupView);
    },
    handleDropdownClick(event) {
      event.stopPropagation();
    },
    handleDocumentContextmenu() {
      this.canMove = false;
    },
    handleContextMenuClick(data, key) {
      this.$emit("on-menu-click", { data, key });
    },
  },
  mounted() {
    on(document, "contextmenu", this.handleDocumentContextmenu);
  },
  beforeDestroy() {
    off(document, "contextmenu", this.handleDocumentContextmenu);
  },
};
</script>

<style>
.menu__item {
  display: block;
  line-height: 20px;
  text-align: center;
  margin-top: 10px;
}
.menu {
  height: 120px;
  width: 100px;
  position: absolute;
  border-radius: 10px;
  border: 1px solid #999999;
  background-color: #f4f4f4;
}
li:hover {
  background-color: #2962b8 ;
  /* color: white; */
}

.department-outer
  .view-box
  .org-tree-wrapper
  .org-tree-node-label
  .org-tree-node-label-inner
  .custom-org-node {
  background-color: #ccc !important;
  font-size: 14px !important;
  font-family: Microsoft YaHei !important;
  font-weight: 400 !important;
  color: #ffffff !important;
}
.department-outer
  .view-box
  .org-tree-wrapper
  .org-tree-node-label
  .org-tree-node-label-inner
  .custom-org-node:hover {
  background-color: #2474fb !important;
}
</style>
